<template>
  <section class='main-container'>
    <el-container>
      <el-main class='main-content pd0'>
        <header class='c-header'>
          <el-carousel trigger='click' height='200px'>
            <el-carousel-item name='one'>
              <p class='img img1'></p>
            </el-carousel-item>
            <el-carousel-item name='two'>
              <p class='img img2'></p>
            </el-carousel-item>
            <el-carousel-item name='three'>
              <p class='img img3'></p>
            </el-carousel-item>
          </el-carousel>
        </header>
        <el-main class='h-blogs'>
          <blogs-new />
        </el-main>
      </el-main>
      <el-aside class='p-info ml10 main-slide'>
        <person-intro />
      </el-aside>
    </el-container>
  </section>
</template>
<script>
import { defineComponent } from "vue";
import BlogsNew from "./blogs-new.vue";
import PersonIntro from "./person-intro.vue";
export default defineComponent({
  name: "home",
  components: {
    BlogsNew,
    PersonIntro,
  },
});
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.5);
  .c-header {
  }
  .main-content {
    padding: 0;
  }
  .img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: none;
    border-radius: 4px;
  }
  .img1 {
    background-image: url("../../assets/imgs/banner01.jpg");
  }
  .img2 {
    background-image: url("../../assets/imgs/banner02.jpg");
  }
  .img3 {
    background-image: url("../../assets/imgs/banner03.jpg");
  }
  &:deep .title {
    padding: 0 10px;
    line-height: 35px;
    height: 35px;
    font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
    // border-left: 5px solid #333;
    color: #333;
    font-weight: bold;
  }
  .h-blogs {
    padding: 0;
    // margin: 0 20px 0 40px;
    background-color: #fff;
  }
  .p-info {
    // margin: 0 40px 0 10px;
    background-color: #fff;
  }
  .main-slide {
    width: 260px;
  }
}
</style>
